<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>用户信息管理</span>
        
        </div>
      </template>
      <!-- 查询 -->
      <el-form :inline="true" :model="frmQuery" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="frmQuery.user_name" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getuserName">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
       
        <el-table-column prop="user_uid" label="uid" width="150" />
        <el-table-column prop="user_name" label="姓名" width="150" />
        <el-table-column prop="user_grade" label="题库一测试成绩" width="120" />
        <el-table-column prop="healthLevel1" label="题库一测评结果" width="200" />
        <el-table-column prop="user_grade2" label="题库二测试成绩" width="120" />
        <el-table-column prop="healthLevel2" label="题库二测评结果" width="200" />
        <el-table-column prop="user_grade3" label="题库三测试成绩" width="120" />
        <el-table-column prop="healthLevel3" label="题库三成测结果" width="200" />
        <el-table-column fixed="right" label="操作" width="">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="detailDialog(scope.row.user_uid)">详情</el-button>
            
           
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 分页 -->
      <el-pagination 
      :currentPage="currentPage" 
      :page-size="pageSize" 
      :page-sizes="[5, 10, 20, 30, 40]" 
      :background="true"
      layout="total, sizes, prev, pager, next, jumper" 
      :total="pageInfo.total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
    </el-card>
    <!-- 详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="查看用户信息" width="60%">
      <el-descriptions :column="5" border title="用户信息">
   
        <el-descriptions-item label="用户名">{{ user.user_name }}</el-descriptions-item>
        <el-descriptions-item label="题库一心理成绩">{{ user.user_grade }}</el-descriptions-item>
        <el-descriptions-item label="题库一测评结果">{{ user.healthLevel1}}</el-descriptions-item>
        <el-descriptions-item label="题库二心理成绩">{{ user.user_grade2 }}</el-descriptions-item>
        <el-descriptions-item label="题库二测评结果">{{ user.healthLevel2}}</el-descriptions-item>
        <el-descriptions-item label="题库三心理成绩">{{ user.user_grade3 }}</el-descriptions-item>
        <el-descriptions-item label="题库三测评结果">{{ user.healthLevel3}}</el-descriptions-item>
      </el-descriptions>
  
    </el-dialog>

    <!-- 修改对话框 -->
   
  </template>
  
  <script>
  import { ElMessage } from 'element-plus'
  import { Plus } from "@element-plus/icons-vue"; //图片上传plus
  export default {
    components: {  Plus },
    data() {
      return {
        currentPage: 1,
        pageSize: 5,
        pageInfo: {},
        tableData: [],
        frmQuery: {
          user_uid: "",
          user_name: ""
        },
        formLabelWidth: "140px",
        form: {},
        dialogFormVisible: false,    //添加对话框 
        detailDialogVisible: false,  //详情对话框
        updateDialogVisible: false,  //修改对话框
        user: {},
      }
    },
    created() {
    },
    mounted() {
      this.LoadData()       // 加载用户信息
      this.getData(1, 5) //分页
    },
    methods: {
      handleSuccess(response) {
        console.log(response);
        //this.imageUrl ="http://localhost:8080/images/upload/"+ response; //图片上传成功的回流函数
        this.form.picture =  response;
      },
      // 分页
      getData(num, size) {
        this.$http.get("http://localhost:8080/user/page", {
          params: {
            pageNum: num,
            pageSize: size,
          },
        }
        ).then((response) => {
          this.pageInfo = response.data
          this.tableData = this.pageInfo.list
        }).catch((err) => {
          console.log(err);
        })
      },
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getData(this.currentPage, this.pageSize)
        console.log("size", pageSize)
  
      },
      handleCurrentChange(pageNum) {
        this.currentPage = pageNum
        this.getData(this.currentPage, this.pageSize)
        console.log("num", pageNum)
  
      },
      LoadData() {         // 加载用户信息数据 
        this.$http.get("http://localhost:8080/user/list", this.frmQuery).then((res) => {
          this.tableData = res.data
          console.log(res.data);
        }).catch((err) => {
          console.log(err);
        })
      },
      detailDialog(user_uid) {     // 详情操作
        console.log(user_uid);
        this.$http.get("http://localhost:8080/user/get/" + user_uid).then((res) => {
          console.log(res.data);
          this.user = res.data
        }).catch((err) => {
  
        })
        this.detailDialogVisible = true
      },
      getuserName() {//查询
        console.log(this.frmQuery.user_name);
        this.$http.get("http://localhost:8080/user/query/" + this.frmQuery.user_name).then((res) => {
          this.tableData = res.data
          console.log(res.data);
        }).catch((err) => {
          console.log(err);/////
        })
      },
      btnAddDialog() {
        this.dialogFormVisible = true
      }
    }
  }
  </script>
    
  <style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .text {
    font-size: 14px;
  }
  
  .item {
    margin-bottom: 18px;
  }
  
  .box-card {
    width: 100%;
  }
  </style>